<template>
  <div>{{ obj }}</div>
  <button @click="obj.age++">加一</button>
  <button @click="obj.name += '啊'">点击啊一声</button>
  <button @click="obj.cp.age++">李四年龄加一</button>
</template>

<script>
import { reactive, watch } from "vue";
export default {
  setup() {
    const obj = reactive({
      name: "张三",
      age: 19,
      cp: {
        name: "李四",
        age: 29,
      },
    });

    //  侦听属性
    //第一种方法 监听响应式数据
    watch(obj, () => {
      console.log("侦听到obj发生变化了");
    });

    //  第二种方法  监听响应式数据的某个属性
    watch(
      () => obj.age,
      () => {
        console.log("侦听到obj.age发生变化了");
      }
    );

    //第三种方法  深度侦听
    watch(
      () => obj.cp,
      () => {
        console.log("侦听到obj.cp发生了改变");
      },
      { deep: true, immediate: true }
    );

    return { obj };
  },
};
</script>

<style>
</style>